<template>
    <div class="inf">
        <transition @before-enter="l1" @enter="l2" @after-enter="l3">
                <div class="xiaoqiu" v-show="Flag" ref="ball"></div>
        </transition>

       <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<lunbotu :lunbolist="lunbotus" :isfull="false"></lunbotu>
					</div>
				</div>
			</div>
            <div class="mui-card">
				<div class="mui-card-header">{{goods.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="info"><span>市场价:</span><span>￥{{goods.market_price}}</span><span>销售价:</span><span>￥{{goods.sell_price}}</span></p>
                        <!-- 数量子组件 向子组件传值-->
                        <p>购买数量:<shuliang  @shops="shops" :max="goods.stock_quantity"></shuliang></p>
                          <button type="button" class="mui-btn mui-btn-primary" >立即购买</button>
                    <button type="button" class="mui-btn mui-btn-danger" @click="shop">加入购物车</button>
					</div>
                  
				</div>
			</div>
            <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<p>商品货号：{{goods.goods_no}}</p>
                    <p>库存情况：{{goods.stock_quantity}}</p>
                    <p>上架时间：{{goods.add_time|dateFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" @click="goDesc(id)">图文介绍</button>
                    <button type="button" class="mui-btn mui-btn-danger  mui-btn-block mui-btn-outlined" @click="goComment(id)">商品评论</button>
                </div>
			</div>
    </div>
</template>
<script>
import lunbotu from '../sub/Lunbotu.vue'
import shuliang from '../sub/Shuliang.vue'
export default {
    data () {
        return {
            lunbotus:[],
            id:this.$route.params.id,
            goods:{},
            Flag: false,
            select:1
        }
    },
    created(){
this.getLun();
this.getGoods();
    },
    methods:{
      getLun(){
          this.$axios.get('api/getthumimages/'+this.id).then(res=>{
            //   console.log(res)
              if(res.data.status===0){
                  res.data.message.forEach((item) => {
                    //   item.img=res.data.message[i].src
                    item.img_url=item.src
                  });
                  this.lunbotus=res.data.message;
              }
          })
      },
      getGoods(){
          this.$axios.get('api/goods/getinfo/'+this.id).then(res=>{
              console.log(res)
              if(res.data.status===0){
                  this.goods=res.data.message[0];
              }
          })
      },
      goDesc(id){
    //    编程式导航
    this.$router.push({name:'goodsdesc',params:{id}});
      },
      goComment(id){
    this.$router.push({name:'goodscomment',params:{id}});
      },
      shop(){
          this.Flag=!this.Flag;
          var goodsinfo={
              id:this.id,
              cound:this.select,
              price:this.goods.sell_price,
              selected:true
          }
          console.log(goodsinfo)
          this.$store.commit("addTo",goodsinfo);
      },
      l1(el){
        el.style.transform="translate(0,0)"
      },
      l2(el,done){
       el.offsetWidth;
    //    获取小球在页面的位置
       const ballposition=this.$refs.ball.getBoundingClientRect();
       const gollposition=document.getElementById("goll").getBoundingClientRect();
       const Xball = gollposition.left-ballposition.left;
       const Yball = gollposition.top-ballposition.top;
       el.style.transform=`translate(${Xball}px,${Yball}px)`;
       el.style.transition="all 0.5s ease";
       done();
      },
      l3(el){
       this.Flag=!this.Flag
      },
      shops(data){
       this.select=data;
    //    console.log("数量"+this.select)
      }
    },
    components:{
        lunbotu,
        shuliang
    }
}
</script>
<style lang="scss" scoped>
.inf{
.xiaoqiu{
    width: 15px;
    height: 15px;
    z-index: 99;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 388px;
    left: 139px;
}
.info{
    span{
        padding:0px 5px 0px 0px;
    }
    :nth-child(2){
        text-decoration: line-through;
    }
    :nth-child(4){
       color: red;
    }
}
.mui-card{
    // text-align: center;
    button{
       margin: 5px 5px 5px 0px;
    }
}
.mui-numbox{
height: 24px;
}
.mui-card-footer{
    display: block;
    button{
        padding: 5px 0px;
    }
}
}
</style>
